<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 200px;
      height: 200px;
      color: blue;
      font-size: 50px;
    }

    .active {
      color: red;
      background-color: pink;
    }
  </style>
</head>

<body>
  <div class="box">文字</div>
  <script>
    //通过classList操作类控制CSS
    //为了解决className容易覆盖掉以前的类名，我们可以通过classList方式追加和删除类名
    /*
    --语法：
    1.追加一个类
    元素.classList.add('类名')
    2.删除一个类
    元素.classList.remove('类名')
    3.切换一个类
    元素.classList.toggle('类名') 
    */

    //通过classList添加
    // 1.获取元素
    const box = document.querySelector('.box')
    // 2.修改样式
    // 2.1 追加类 add() 类名不加点，并且是字符串
    // box.classList.add('active')
    // 2.2 删除类 remove() 类名不加点，并且是字符串
    // box.classList.remove('box')
    // 2.3 切换类  开关类toggle()————有或没有：有就删掉，没有就加上
    box.classList.toggle('active')  //括号里面只能一个值，没有active，添加active
    box.classList.toggle('active')  //重复写一次，已经有active，删掉active
    box.classList.toggle('box')  //删掉box，“文字”恢复原样  当然也可以用这种box.classList.remove('box')

    // 另外：
    // classList.contains()用来看看有没有包含某个类，有则返回true，没有就返回false
    console.log(box.classList.contains('box'))  // false
    console.log(box.classList.contains('active'))  // false
  </script>
</body>

</html>